<template>
  <el-menu
    :route="true"
    :unique-opened="true"
    class="a-side"
    background-color="#4c637b"
    text-color="#fff"
    active-text-color="#409EFF">
    <el-submenu v-for="(item, index) in sidebar.tree" :key="index" index="/">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item v-for="(sub, subIndex) in item.subs" :key="subIndex" :index="sub.path">
        {{sub.title}}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import { mapState } from 'vuex'
  @Component({
    components: {},
    computed: {
      ...mapState({
        sidebar: state => state.web.sidebar
      })
    }
  })
  export default class ASide extends Vue {

  }
</script>

<style lang="scss" scoped>
  .a-side{
    width: 100%;
  }
</style>
